<script setup>
defineProps({
  count: {
    type: Number,
    default: 99
  },
  todayNew: {
    type: Number,
    default: 99
  },
  campusName: {
    type: String,
    default: ''
  },
  picture: {
    type: String,
    default: ''
  },
  addr: {
    type: String,
    default: '海南省海口市'
  },
  size: {
    type: String,
    default: 'default'
  }
})
</script>

<template>
  <div class="desc-area" :class="size" v-if="true">
    <div class="left">
      <img :src="picture" alt="" />
    </div>
    <div class="right">
      <div class="desc">
        <h3>{{ campusName }}</h3>
        <p>
          <el-icon><i-ep-Location /></el-icon>
          <span> {{ addr }} </span>
        </p>
      </div>
      <div class="count">
        <ul class="goods-sales">
          <li>
            <p>车源数量</p>
            <p>{{ count }}+</p>
            <p><i class="iconfont icon-task-filling"></i>车源</p>
          </li>
          <li>
            <p>今日上新</p>
            <p>{{ todayNew }}+</p>
            <p><i class="iconfont icon-favorite-filling"></i>新上架</p>
          </li>
          <li>
            <p>成交数量</p>
            <p>99+</p>
            <p><i class="iconfont icon-comment-filling"></i>成交</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.desc-area {
  display: flex;
  padding: 10px 0;

  h3 {
    color: #666;
    font-weight: normal;
    margin-bottom: 10px;
  }

  .left {
    text-align: center;
    padding-left: 10px;
    img {
      border-radius: 10px;
    }
  }
  .right {
    .desc {
      padding-left: 20px;
      p {
        color: $xtxColor;
        span {
          color: #666;
          position: relative;
          top: -2px;
          padding-left: 5px;
        }
      }
    }

    .goods-sales {
      display: flex;
      justify-content: space-around;
      align-items: center;
      text-align: center;

      li {
        flex: 1;
        position: relative;

        ~ li::after {
          position: absolute;
          top: 10px;
          left: 0;

          border-left: 1px solid #e4e4e4;
          content: '';
        }

        p {
          &:first-child {
            color: #999;
          }

          &:nth-child(2) {
            color: $priceColor;
            margin-top: 10px;
          }

          &:last-child {
            color: #666;
            margin-top: 10px;

            i {
              color: $xtxColor;
              font-size: 14px;
              margin-right: 2px;
            }

            &:hover {
              color: $xtxColor;
              cursor: pointer;
            }
          }
        }
      }
    }
  }

  &.mini {
    font-size: 13px;
    h3 {
      font-size: 20px;
    }
    img {
      width: 150px;
      height: 150px;
    }
    .desc {
      height: 60px;
    }
    .goods-sales {
      width: 260px;
      margin-top: 15px;
    }
  }

  &.default {
    h3 {
      font-size: 24px;
    }

    img {
      width: 200px;
      height: 200px;
    }
    .desc {
      height: 80px;
    }
    .goods-sales {
      width: 300px;
      margin-top: 30px;
    }
  }
}
</style>
